<template>
    <div class="sjplatformAdd">
        <el-form label-width="100px">
            <el-form-item label="姓名：">
                <span>{{ receivedProps.realName }}</span>
            </el-form-item>
            <el-form-item label="角色：">
                <el-select multiple clearable v-model="userStore.userModel.roleNames" placeholder="请选择角色"
                    @update:modelValue="handleNodeChange">
                    <el-option v-for="item in data" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { useUserTable } from "../../../hooks/SystemManager/User/useUserTable";
import { useRoleTree } from "../../../hooks/SystemManager/Role/useRoleTree";

let receivedProps = defineProps(["userId", "realName"]);

// 角色列表
let { data, fetchData } = useRoleTree();
fetchData(); // 调用数据获取方法

let { userTable, userStore, getUserRoles } = useUserTable(0, 10);

getUserRoles(receivedProps.userId).then(() => {
    userStore.userModel.roleIds = [];
    userStore.userModel.roleNames = [];
    console.log("userTable.roles",userTable.roles)
    for (let role of userTable.roles) {
        userStore.userModel.roleIds.push(role.id);
        userStore.userModel.roleNames.push(role.roleName);
    }
});

//角色选择
function handleNodeChange(value) {
    userStore.userModel.roleIds = [];
    for (let n of value) {
        let selectedNode = data.value.find(item => item.value === n);
        if (selectedNode) {
            userStore.userModel.roleIds.push(selectedNode.id);
        }
    }
}
</script>